<template>
  <div class="chart-content">
    <div v-if="chartDataEmpty" class="operator-chart-empty">
      <img alt="" src="@/assets/view/empty2.png" />
      因样本数过少，暂无图表数据
    </div>
    <div v-else id="chart"></div>
  </div>
</template>

<script lang="ts">
/**
 * 经济类算子节点 - 数据移位图表
 */
import { Component, Vue, Watch } from 'vue-property-decorator'
import DataStore from '@/store/modules/dataview'
import { HeatmapMatrixChart } from '@zjlabvis/vis-charts'
import { cloneDeep } from 'lodash'

@Component({
  components: {},
})
export default class ShiftingChart extends Vue {
  private chartData: any[] = [] // 图表数据
  public chartDataEmpty: boolean = true // 空数据
  public compInstance: any = ''
  public yAxisAttribute: string[] = []
  public cols: string[] = []
  public cols_rev: string[] = []
  public corr: any[] = []

  // 图表数据
  public get getQueryDataVis() {
    return DataStore.getQueryDataVis || {}
  }

  @Watch('getQueryDataVis', { deep: true })
  private watchChartResult() {
    if (this.compInstance && !this.chartDataEmpty) {
      this.compInstance.destroy()
    }
    if (this.getQueryDataVis.cols) {
      this.chartDataEmpty = false
      this.$nextTick(() => {
        this.init()
      })
    } else {
      this.chartDataEmpty = true
      this.compInstance = ''
    }
  }

  /**
   * 获取相关矩阵热力图数据
   */
  private get getHeatMapData() {
    return {
      title: 'Pearson Correlation Coefficient',
      titleIsShow: true,
      value: this.chartData,
      valueKey: 'y',
      labelKey: 'x',
      heatMapDataKey: 'value',
      labelIsShow: true,
      labelTextMaxLength: 100,
      size: [700, 420],
      padding: [10, 10, 10, 10],
      // #D6E4FF
      legendBasicColor: ['#6495EE', '#00008B'],
      xAxisFontSize: 12,
      xAxisLabelMaxLength: 5,
      yAxisFontSize: 12,
      yAxisLabelMaxLength: 5,
    }
  }

  /**
   * 图表数据准备
   * @param key 数据类型
   */
  private prepareChart() {
    const data = cloneDeep(this.corr)
    const result: any[] = []
    const N = this.cols.length
    const N2 = N * N

    let i = 1
    this.cols.forEach((itemx: any) => {
      let j = 1
      this.cols_rev.forEach((itemy: any) => {
        result.push({
          x: itemx,
          y: itemy,
          value: data[N2 - j * N + i - 1],
        })
        j += 1
      })
      i += 1
    })
    this.chartData = result
  }

  public async init() {
    const { cols, corr } = this.getQueryDataVis
    // const { cols, corr } = {cols:['a','b','c'], corr:[1,0.5,0.2,0.5,1,-0.3,0.2,-0.3,1]}
    this.cols = cols
    this.cols_rev = cloneDeep(this.cols).reverse()
    this.corr = corr
    this.prepareChart()
    this.compInstance = new HeatmapMatrixChart('chart', this.getHeatMapData)
  }
}
</script>

<style lang="less" scoped>
@import '@/styles/scroll-bar';

.chart-header {
  display: flex;
  height: 38px;
  justify-content: space-between;
  line-height: 38px;
  width: 100%;
}

.chart-content {
  background: #fff;
  padding: 8px 20px;
  width: 100%;

  .operator-chart-empty {
    align-items: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
}
</style>
